<!-- 开放管理-数据分析-营地评价查询 -->
<template>
   <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">

    <div class="JNPF-common-layout">
      <div class="JNPF-common-layout-center">
       
        <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
                <el-col :span="10">
                 <el-date-picker v-model="fbillcredate" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                   start-placeholder="开始日期" end-placeholder="结束日期">
                 </el-date-picker>
              </el-col>

               <el-col :span="6">
                <el-select v-model="value" placeholder="请选择营地">
                    <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-col>

              <template v-if="showAll">
          
                <el-col :span="6">
                <el-select v-model="value" placeholder="请选择区域">
                    <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-col>

              <el-col :span="6">
                <el-select v-model="value" placeholder="请选择课程">
                    <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-col>

              </template>

              <el-col :span="6">
                    <el-form-item label="">
                        <el-button type="primary" icon="el-icon-search">查询</el-button>
                        <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
                        <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
                    </el-form-item>
              </el-col>

            </el-form>
        </el-row>

        <div class="JNPF-common-layout-main JNPF-flex-main">
          <div id="pieChart1" ref="pieChartRef1"  style="width: 100%; height: 250px"></div>
        </div>

        <div class="JNPF-common-search-box">
         <JNPF-table :data="list" border v-loading="loading">
          <el-table-column prop="FAREA" label="所属区域" width="105"></el-table-column>
          <el-table-column prop="FCATNAME" label="营地名称"></el-table-column>
          <el-table-column prop="F01" label="非常满意" ></el-table-column>
          <el-table-column prop="F02" label="满意" ></el-table-column>
          <el-table-column prop="F03" label="一般" ></el-table-column>
          <el-table-column prop="F04" label="不满" ></el-table-column>
          <el-table-column prop="F05" label="非常不满" ></el-table-column>
         </JNPF-table>
        </div>
      
  
     </div>
    </div>
   </ul>
 </template>
  
 <script>
  import jnpf from "@/utils/jnpf"
  import * as echarts from 'echarts';
  export default {
    name: '',
    props: {},
    components: '',
    data() {
      return {
        showAll:false,
        fbillcredate: [jnpf.dateFormat(new Date(), "YYYY-MM-DD"), jnpf.dateFormat(new Date(), "YYYY-MM-DD")],

        list:[{
              "FAREA":"嘉定区",
              "FCATNO":"自然",
              "FCATNAME":"上海研学教育中心",
              "F01":0,
              "F02":2,
              "F03":0,
              "F04":5,
              "F05":6
            },{
              "FAREA":"青浦区",
              "FCATNO":"自然",
              "FCATNAME":"上海科技研学基地",
              "F01":0,
              "F02":2,
              "F03":0,
              "F04":5,
              "F05":6
            },
            ,{
              "FAREA":"崇明岛区",
              "FCATNO":"人为",
              "FCATNAME":"上海文化之旅研学机构",
              "F01":0,
              "F02":2,
              "F03":0,
              "F04":5,
              "F05":6
            },{
              "FAREA":"黄浦区",
              "FCATNO":"人为",
              "FCATNAME":"蓝湖营地教育冬令营",
              "F01":0,
              "F02":2,
              "F03":0,
              "F04":5,
              "F05":6
            }
          ],
        //所属校区选择数据
        options2: [{
          value: '20E01',
          label: '黄浦区教育局'
        }, {
          value: '20E02',
          label: '静安区教育局'
        }, {
          value: '20N01',
          label: '宝山教育局'
        }, {
          value: '20N02',
          label: '闵行教育局'
        }],
        
        chart: null,
        _thisForChart: null,
        _thisForWindow: null,
        colorItem: {
          "北京": '#ff6161',
          "上海": '#e0815b',
          "广州": '#ffaf33',
          "深圳": '#637be6',
          "成都": '#a1b2ff',
          "西安": '#b3daff',
        },
      }
    },
    created() {},
    mounted () {
      this.$nextTick(() => {
        this.initPieChart();
        this.addEventListenerToSidebarContainer(this)
        this.addEventListenerToWindowResize(this)
      });
      },
      beforeDestroy () {
      this.removeEventListenerToSidebarContainer()
      this.removeEventListenerToWindowResize()
    },
    computed: {},
    watch: {},  
    methods: {
      initPieChart () {
        let echartData = [
          {
            name:'非常满意',
            value: '5.5',
          },
          {
            name:'满意',
            value: '35.0',
          },
          {
            name:'一般',
            value: '38.0',
          },
          {
            name:'不满',
            value: '20.0',
          },
          {
            name:'非常不满',
            value: '6.5',
          }
        ]
        var chartDom = document.getElementById('pieChart1');
        this.chart = echarts.init(chartDom);
        let handleEchartData = echartData .map((item3) => {
          return {
            value: item3.value,
            name: item3.name,
            itemStyle: {
              color: this.colorItem[item3.name]
            }
          }
        })
        let option = {
            // color: ['#EE3F3F','#ff6161','#e0815b','#e0a188','#FFB441','#FFDAA1',],
            // tooltip: {
               // show: true,
               // trigger: 'item',
               // backgroundColor: 'rgba( 0, 0, 0,0.7)',
               // borderColor: 'rgba( 0, 0, 0,0.7)',
               // triggerOn: "click", // 点击事件
               // enterable: true, // 鼠标可移入提示框浮层中，默认为false
               // position: ['53%','40%'],
               // fontSize: 10,
               // formatter:function(params, ticket,callback) {
                 // 实际请求接口，获取对应的数据
                 // let req_data = {
                 //   name: params.name,
                 // }
                 // testApi.getDetail(req_data).then((res) => {
                 //   if (res.data && res.data.length) {
                 //     for(let i = 0; i < res.data.length; i++) {
                 //     list.push(
                 //       "<div style='display:flex;align-items:center;justify-content:space-between;transform:scale(0.9)'><span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].code + "</span>" + "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].name + "</span>"+  "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + "权重:" + res.data[i].WEIGHT + '%' + "</span></div>"
                 //     )
                 //   }
                 //   listItem = list.length < 12 ? "<div style='margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>" : "<div style='height: 235px;overflow-y: auto;margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>"
                 //   callback(ticket, listItem)
                 //   } else {
                 //     listItem = "<div>"+ '数据为空' + "</div>"
                 //     callback(ticket, listItem)
                 //   }
                 // })
                 // return "<span>"+ "数据请求中..." + "</span>"
                // }
               // },
              legend: {
                  bottom: 0,
                  textStyle: {
                      rich: {
                          name: {},
                          value: {
                              align: 'right',
                              padding: [0, -80, 0 ,0],
                          }
                      }
                  },
                formatter: function(name) {
                  let value
                  for (let i = 0; i < echartData.length; i++) {
                      if (echartData[i].name === name) {
                          value = echartData[i].value
                      }
                  }
                  var val = value
                  return [`{name|${name}}` + '：' + `{value|${val}%}`]
                  },
                  },
                  series: [
                    {
                      name: '',
                      type: 'pie',
                      radius: ['45%', '65%'],
                      center:['50%' ,'40%'],
                      avoidLabelOverlap: true,
                      label: {
                      show: false,
                      position: 'center',
                      // formatter: function(params) {
                              // 	return '{name|' +  params.name + '}' + '\n' +  '{value|' + params.data.value + '%' + '}'
                              // }, 
                              // rich: {
                              // 	name: {
                              // 		fontSize: 14,
                              // 	},
                              // 	value: {
                              // 		fontSize: 20,
                              // 		lineHeight: 30,
                              // 	}
                              // }
                        },
                      emphasis: {
                      label: {
                         show: true,
                                  lineHeight: 30,
                                  formatter: function(params) {
                                    return '{name|' +  params.name + '}' + '\n' +  '{value|' + params.data.value + '%' + '}'
                                }, 
                                  rich: {
                                      name: {
                      // color: "inherit",
                                          fontSize: 14,
                                      },
                                      value: {
                      color: "inherit",
                                          // fontSize: 20,
                                          // lineHeight: 30,
                                      }
                                  },
                                  textStyle: {
                    fontSize: 20,
                    fontWeight: 700,
                                 },
                               }  
                           },
                    labelLine: {
                    show: false,
                    length: 7,
                    length2: 6,
                    lineStyle: {}
                    },
                   data: handleEchartData,
                   }
                ]
             };
          this.chart.setOption(option);
      },
  
      // 监听侧边栏导航的宽度发生变化
      addEventListenerToSidebarContainer(_this) {
        let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
        this._thisForChart = _this;
        sidebarContainer &&
          sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
      },
      removeEventListenerToSidebarContainer() {
        let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
        this._thisForChart = null
        sidebarContainer &&
          sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
      },
  
      sidebarResizeHandler(e) {
        if (e.propertyName === "width") {
          this._thisForChart.chart.resize();
        }
      },
  
      // window 的尺寸发生变化的时候 会执行图表的resize
      addEventListenerToWindowResize(_this) {
        this._thisForWindow = _this;
        window.addEventListener("resize", this.windowResizeHandler);
      },
      removeEventListenerToWindowResize(_this) {
       this. _thisForWindow = null
        window.removeEventListener("resize", this.windowResizeHandler);
      },
  
      windowResizeHandler(e) {
        this._thisForWindow.chart.resize();
      },
          
    },
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>
  